import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import SearchBox from "../../components/SearchBox";
import { Ionicons } from "@expo/vector-icons";
import HistoryContext from "../../context/suppiler/historyContext";

const RenderSearch = (props) => {
  const { historydata, clearHistoryData } = React.useContext(HistoryContext);
  return (
    <View style={styles.rendercontainer}>
      <View style={styles.topContainer}>
        <Text style={styles.historyText}>历史搜索</Text>
        <TouchableOpacity onPress={clearHistoryData}>
          <Ionicons
            style={styles.deleteIcon}
            name="ios-trash-outline"
            size={24}
            color="#5b5b5b"
          />
        </TouchableOpacity>
      </View>

      {historydata.length === 0 ? (
        <View style={styles.defaultStyle}>
          <Text style={styles.defaultText}>暂无搜索历史</Text>
        </View>
      ) : (
        <View style={styles.tagContainer}>
          {historydata.map((tag, index) => {
            return (
              <TouchableOpacity
                style={styles.tagItem}
                key={index}
                onPress={() => {
                  props.goSearch(tag);
                }}
              >
                <Text style={styles.tagText}>{tag}</Text>
              </TouchableOpacity>
            );
          })}
        </View>
      )}
    </View>
  );
};

const SearchScreen = ({ navigation }) => {
  const { addHistoryData } = React.useContext(HistoryContext);
  const goSearch = (item) => {
    navigation.navigate("SearchDetail", { searchText: item });
  };
  return (
    <View style={styles.container}>
      <SearchBox
        onSearchCancel={() => navigation.goBack()}
        addHistoryData={addHistoryData}
        goSearch={goSearch}
      />
      <RenderSearch goSearch={goSearch} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    flex: 1,
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: Platform.OS === "android" ? 25 : 0,
  },
  rendercontainer: {
    paddingLeft: 20,
    paddingRight: 20,
  },
  topContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginLeft: -20,
    //对于父元素所设置的padding，子元素想要进行忽略，可以设置负的margin值进行覆盖
    marginRight: -20,
  },
  historyText: {
    color: "#6c6c6c",
    fontSize: 16,
  },
  deleteIcon: {},
  tagContainer: {
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    // marginTop: 10,
    marginLeft: -20,
    marginRight: -20,
  },
  tagItem: {
    borderRadius: 10,
    justifyContent: "center",
    backgroundColor: "#E6E7E8",
    marginRight: 15,
    marginBottom: 15,
    height: 30,
  },
  tagText: {
    justifyContent: "center",
    fontSize: 15,
    paddingLeft: 12,
    paddingRight: 12,
  },
  defaultStyle: {
    marginTop: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  defaultText: {
    color: "#6c6c6c",
  },
});
export default SearchScreen;
